<template>
  <div>
    <el-card class="box-card">
      <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
      <el-table ref="singleTable" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" border
        style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="landName" label="地块名称" width="200" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="totalArea" label="面积(m²)" width="120" align="center">
        </el-table-column>
        <el-table-column prop="leaseState" label="租赁状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.leaseState==0?'success':scope.row.leaseState==1?'warning':'danger'">{{scope.row.leaseState==0?'已租赁':scope.row.leaseState==1?'可租赁':'未配置'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="baseName" label="所属基地" width="180" align="center">
        </el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="120" align="center">
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.disabled?'success':'danger'">{{scope.row.disabled?'启用中':'禁用中'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expirationTime" label="到期时间" width="200" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.leaseState==1" @click="deleteRow(scope.row,3)" type="text" >编辑</el-button>
            <el-button v-if="scope.row.leaseState==2" @click="deleteRow(scope.row,1)" type="text" >配置</el-button>
            <el-popconfirm
                  :title="+scope.row.disabled?'确定禁用?':'确定启用?'"
                  @confirm="disabled(scope.row)"
                >
                <el-button slot="reference" type="text"    style="margin: 0 20px;">{{scope.row.disabled?'禁用':'启用'}}</el-button>
                </el-popconfirm>
            <el-button @click="checkQrd(scope.row)" type="text" >生成地块码</el-button>
            <el-button @click="downQrd(scope.row)" type="text" >下载地块码</el-button>
          </template>
        </el-table-column>
      </el-table>
       <div class="pagination-box">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="info.pageNum"
          :page-size="info.pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
       </div>
       <el-dialog
            title="地块码"
            :visible.sync="dialogVisible"
            width="20%">
            <img class="qrdImg" :src="urlImg" alt="">
        </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {findAllLands,compileLandMsg,generateLandQrcode} from '../util/api.js'
export default {
  data() {
    return {
      info:{
        pageNum:1,
        pageSize:6
      },
      dialogVisible:false,
      urlImg:"",
      total:0,
      tableData: [],
    }
  },
  mounted(){
       this.getLands()
  },
  methods: {
    async getLands(){
          let res =await findAllLands(this.info)
          // console.log(res)
          if(res.code!=200)return
          this.tableData = res.data.rows
          this.total = res.data.total
    },
    handleCurrentChange(val) {
        this.info.pageNum = val
        this.getLands()
        // console.log(`当前页: ${val}`);
    },
    //禁用 启用
   async disabled(row){
           let data = {
             sign:2,
             landId:row.landId,
             disabled:row.disabled?0:1
           }
          let res = await compileLandMsg(data)
          // console.log(res)
          if(res.code!=200)return
          row.disabled = data.disabled
    },
    //生成地块码
  async  checkQrd(row){
        let res = await generateLandQrcode({landId:row.landId})
        // console.log(res)
        if(!res)return this.$message.error('生成错误！')
        this.urlImg = URL.createObjectURL(res)
        this.dialogVisible = true
    },
    //下载地块码
   async downQrd(row){
      let res = await generateLandQrcode({landId:row.landId})
      // console.log(res)
      if(!res)return this.$message.error('生成错误！')
      let link = document.createElement('a')
      link.download = row.landName+"地块码.png";
      link.style.display = 'none';
      link.href = URL.createObjectURL(res);
      link.click()
      window.URL.revokeObjectURL(link.href)
    },
    deleteRow(row,sign) {
      this.$router.push({
        path: '/landManagement/compile',
        query:{
          landId:row.landId,
          sign:sign
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  margin: 14px 0;
  .pagination-box{
    width: 100%;
    padding: 20px;
    .el-pagination{
      text-align: right;
    }
  }
  .qrdImg{
    width: 100%;
    height: 100%;
  }
}
</style>